<template>
	<view>
		<view>

			<view class="mainContent">

				<view class="main_content_center">
					<view class="contentTitle">
						<text class="app_name">APP名字</text>
						<text class="app_price">推广单价</text>

						<text class="app_qq">QQ</text>
						<text class="app_qq">微信</text>
						<text class="app_qq">手机</text>
						<text class="app_ck">查看数</text>
						<text class="app_caozuo1">操作</text>

					</view>
					<template v-if="tjs.length>0">
						<view class="contentItem" v-for="cp in tjs">
							<view @click="showDetail(cp)" class="contentItem">
								<text class="app_name_tj">推荐:{{cp.CHANPIN_APPMINGZI}}</text>
								<text class="app_price_tj">{{cp.CHANPIN_APPJIAGE + "元"}}</text>

								<view class="app_qq">
									<img src="../../../static/qq.png" v-show="hasQQ(cp)"></img>
									<text v-show="!hasQQ(cp)">-</text>
								</view>
								<view class="app_qq">
									<img src="../../../static/wechat.png" v-show="hasWX(cp)"></img>
									<text v-show="!hasWX(cp)">-</text>
								</view>
								<view class="app_qq">
									<img src="../../../static/phone.png" v-show="hasPhone(cp)"></img>
									<text v-show="!hasPhone(cp)">-</text>
								</view>
								<text class="app_ck_tj">{{cp.chakan + "次"}}</text>
								<text class="app_caozuo_tj">点击查看</text>
							</view>
						</view>
					</template>
					<template v-for="cp in datas">
						<view class="contentItem">

							<text class="app_name" @click="showDetail(cp)">{{cp.CHANPIN_APPMINGZI}}
							</text>


							<text class="app_price" @click="showDetail(cp)">{{cp.CHANPIN_APPJIAGE + "元"}}</text>

							<view class="app_qq" @click="showDetail(cp)">
								<img src="../../../static/qq.png" v-show="hasQQ(cp)"></img>
								<text v-show="!hasQQ(cp)">-</text>
							</view>
							<view class="app_qq">
								<img src="../../../static/wechat.png" v-show="hasWX(cp)"></img>
								<text v-show="!hasWX(cp)">-</text>
							</view>
							<view class="app_qq">
								<img src="../../../static/phone.png" v-show="hasPhone(cp)"></img>
								<text v-show="!hasPhone(cp)">-</text>
							</view>
							<text class="app_ck">{{cp.chakan + "次"}}</text>
							<text class="app_caozuo" @click="showDetail(cp)">查看详情</text>

						</view>
					</template>

					<pageView ref="pageView"></pageView>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import pageView from '../../views/PageView.vue'
	export default {
		components: {
			pageView
		},
		created() {
			//注册全局监听事件，搜索后更新界面数据
			uni.$on(this.pageType, (page) => {
				this.getChanPing(page);
			})
		},

		data() {
			return {
				datas: [],
				tjs: [],
				pageType: "U_cpPage",
				page:1,
			}
		},
		props: {
			msg: String
		},
		mounted() {
			this.$refs.pageView.setType(this.pageType);
			this.$nextTick(() => {
				this.getChanPing(1);
			});

		},

		methods: {

			//跳转到产品详情页面
			showDetail(cp) {
				uni.navigateTo({
					url: '../chanping/ChanpingDetail',
					success: function(res) {
						res.eventChannel.emit('setCp', cp)
					}
				})

			},

			hasQQ(cp) {
				if (this.isNull(cp.CHANPIN_QQHM)) {
					return false;
				}
				return true;
			},
			hasWX(cp) {
				if (this.isNull(cp.CHANPIN_WXHM)) {
					return false;
				}
				return true;
			},
			hasPhone(cp) {
				if (this.isNull(cp.CHANPIN_SJHM)) {
					return false;
				}
				return true;
			},
			isNull(data) {
				if (data == null || data == "") {
					return true;
				}
				return false;
			},

			async getChanPing(pageNum) {
               this.page=pageNum;
				try {
					const res = await this.$getData({
						url: this.$apis.getChanPingByUser,
						data: {
							page: pageNum,
							userId: this.$PublicData.getUserdata().uid,
						}
					})
					this.datas = res.data.data;
					if (res.data.tj != null) {
						this.tjs = res.data.tj;
					}

				} catch (e) {
					console.log("eee: ", e);
				}
			},

			 deleteCp(data) {
				uni.showModal({
					title: '提示',
					content: '是否删除该条数据?',
					showCancel: true,
					success: (res)=> {
						if (res.confirm) {
							this.todeleteCp(data);
						} 
					}
				});

			},
			async todeleteCp(data) {
				try {
					const res = await this.$getData({
						url: this.$apis.deleteCpByUser,
						data: {
							CHANPIN_ID: data.CHANPIN_ID,
							uid: this.$PublicData.getUserdata().uid,
						}
					})
				this.$Utils.showToast("删除成功");
				this.getChanPing(this.page);
				uni.$emit('updateSize', 1);
				} catch (e) {
					console.log("eee: ", e);
				}
			
			}
			
			



		},


	}
</script>

<style>
	. {
		-webkit-box-sizing: border-box; //谷歌浏览器
		-moz-box-sizing: border-box; //火狐浏览器
		box-sizing: border-box;
		margin: 0px;
	}

	.mainContent {
		margin-bottom: 50px;
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;

	}

	.main_content_center {
		min-height: 800px;

	}

	.app_name :hover {
		background: #F99B15;
		color: #FFFFFF;
		cursor: pointer;
	}



	.contentTitle {

		margin-top: 5px;
		align-items: center;
		height: 40px;
		padding-left: 5px;
		padding-right: 5px;
		width: 950px;
		display: flex;
		background: #E5E5E5;
	}

	.contentItem {
		justify-content: center;
		align-items: center;
		height: 50px;
		padding-left: 5px;
		padding-right: 5px;
		width: 950px;
		display: flex;
		border-bottom: 1px solid #E5E5E5;

	}

	.contentItem_content {

		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		white-space: nowrap;
	}

	.contentItem image {
		width: 20px;
		height: 20px;
	}

	.app_name {
		color: #000000;
		flex-grow: 1;
		display: flex;
		width: 380px;
	}

	.app_name_tj {
		color: #F99B15;
		flex-grow: 1;
		display: flex;
		width: 380px;
	}

	.app_price {
		color: #333;
		justify-content: center;
		display: flex;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		width: 192px;
	}

	.app_price_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		width: 192px;
	}

	.app_kind {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 192px;
	}

	.app_kind_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 192px;
	}

	.app_qq {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 192px;
	}

	.app_jiesuan {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 192px;
	}

	.app_jiesuan_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 192px;
	}

	.app_ck {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 200px;
	}

	.app_ck_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 200px;
	}

	.app_caozuo1 {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_caozuo {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
		
	}

	.app_caozuo :hover {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
		border-radius: 3px;
		background: #FF8C00;
		color: #FFFFFF;
		cursor: pointer;
	}

	.app_caozuo_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}



	.click_a {
		background: #F99B15;
		color: #FFFFFF;
	}
</style>
